#cloudinary signed uploads | Explore Tumblr posts and blogs

matrixtronx · 2 years ago

Text

Exploring the World of AI-Generated Images: From Simple Shapes to Hyper realistic Scenes

Artificial intelligence has come a long way in the field of image generation. From simple shapes to highly realistic scenes, AI is capable of creating a wide range of images that can be used for various purposes.

One of the earliest forms of AI-generated images were simple geometric shapes, such as circles and squares. These shapes were used to study the basics of computer vision and machine learning.

As AI technology has advanced, so has the complexity of the images it is able to generate. Today, AI algorithms can generate images of objects, animals, and even people that are nearly indistinguishable from photographs taken by a camera.

There are several different approaches to generating images with AI. One approach is to use a neural network to learn from a dataset of real images and then generate new images based on what it has learned. Another approach is to use a generative model, which can create images from scratch based on a set of input parameters.

One of the key benefits of AI-generated images is their ability to save time and resources. In industries such as advertising and film, creating high-quality images can be a time-consuming and costly process. AI-generated images can help to streamline this process and create a more efficient workflow.

In addition to their practical applications, AI-generated images also have the potential to be used as a form of artistic expression. By using AI to manipulate and generate images, artists can create new visual styles and forms of artistic expression that would not be possible with traditional methods.

Overall, the world of AI-generated images is an exciting and rapidly evolving field. As AI technology continues to improve, it will be interesting to see the many new and innovative ways that it is used to generate images.

1 note · View note

dvijinfotechwriter · 4 years ago

Text

Top 10 NPM Packages for Node.js Developers

The standard method for managing Node.js. NPM has been an excellent resource for JavaScript developers.They can use NPM to share ready-to-use code for resolving bugs within a particular website or app.

Any NPM package consists of three components: a website, a Command Line Interface (CLI), and a registry.

This article will go over the top ten NPM packages that you will find most useful.

Cloudinary

If you need a solution for the images in your web application, you should not overlook the useful Cloudinary. It is a full-fledged cloud service with a plethora of features that will serve you well. From uploading visual content to image resizing and cropping, you name it. Of course, none of this would be possible without the use of sophisticated software. In other words, Cloudinary is user-friendly enough for both beginners and experts to get the most out of it.

Cloudinary's API allows you to seamlessly integrate it into any project or application without breaking a sweat. Remember, you can even sign up for a free account and try Cloudinary right away to see how powerful and effective it is. The official tool website also contains all of the additional information about how to use the tool, such as setup, configuration, embedding, and so on.

Lodash

Lodash is the fourth NPM package on our list. This is especially useful if you're dealing with a large number of numbers, digits, arrays, and so on.

Lodash is an alternative to JavaScript for those who find it difficult to learn. Lodash is useful to create complex function easier.

The best thing about Lodash is that it comes in a variety of formats and packages. As a result, web developers will have greater flexibility when using this NPM package.

Grunt

You can avoid task runners for as long as you want, but learning one will completely change your programming experience from the start. You can easily allow yourself to have fewer tasks to care for for a specific project by using a task runner, and instead automate the process of doing minifications, compile tasks, testing, code linting, and so on. The fewer of these you have to do on your own, the more time you'll have to do actual coding work. And if you don't see a plugin that does what you need, just make your own; Grunt allows you to publish Grunt-specific plugins via NPM.

Nodist

Nodist is the way to go if you need a complete Node.js and NPM version manager for Windows. For your convenience, it fully supports CMD, Powershell, Git bash, and Cygwin. If you are new to using a manager for Windows, read through the installation process with installer and chocolatey to ensure a flawless execution. When you read through the entire documentation, you will also learn everything you need to know about using, debugging, testing, building, and activating Nodist. You can also contact the author if you want to share ideas or if you run into any problems along the way.

Async.js

Asynchronous has completely redesigned how JavaScript content interacts with your web pages. This enables you to improve performance by removing render-blocking JavaScript. Render blocking basically means that any JavaScript content is "above the fold" on a page will not be loaded until JavaScript itself has finished loading in the page. The library was designed to be used with Node.js, but it now also works with browsers. That way, you can inject it into any project, whether or not it uses Node.js. This library allows you to control over more than twenty functions.

PM2

PM2 Node.js is well-known as a framework for scaling large applications and infrastructure. Process management should be a top priority for any Node.js developer. PM2 includes process management for production applications as well as a load balancer to help with any potential performance improvements. With PM2, your applications remain online indefinitely, giving you the ability to reload apps without experiencing any downtime.

Socket.IO

Socket allows you to create truly real-time communication apps that require real-time streams of content, either directly from the data you're working with or via an API from an external source. We've seen apps like a Twitter bot that collects the most recent tweets, a Facebook bot that watches the news, and other interesting combinations of APIs that work with data in real-time. Imagine what such communication methods could do for your analytics; truly real-time analytics are still being actively developed even by large companies like Google Analytics, but with Socket, you get early access to all of that.

Debug

Debug is the next name on our list. This NPM package is nearly synonymous with ease of use. This Node. js-powered NPM package assists you in gathering all of your logs during the coding process under a specific module.

Debug may cause problems for some of you. Mostly because there are some styling and tagging tricks that first-timers may find difficult to learn.

These, however, are not the most important aspects of this NPM package. You will eventually be able to learn everything.

Bower

Websites used to be made up of little more than HTML, CSS, and, in some cases, JavaScript. Nowadays, websites would be impossible to create without the use of external libraries, tools, frameworks, and other JS-related utilities. Bower handles the management of your components, whether they are JS, CSS, or HTML. (Fonts and visual content are also acceptable!) Bower carefully allocates all of the packages that you use, and then assists you in keeping them up to date and regularly checked for potential risks. A simple Bower file can aid in the upkeep of an application the size of Fortune 500 corporations.

Mocha

Mocha is a feature-rich JavaScript test framework that runs on Node.js and the browser to simplify and enjoy asynchronous testing. Mocha tests are executed in a sequential order, allowing for flexible and accurate reporting while mapping uncaught exceptions to the appropriate test cases. Testing is critical for understanding how well the application is performing, where any specific leaks can be found, and how we can improve these bugs, problems, and annoyances that we encounter. Testing allows developers to better understand how their code performs and, as a result, learn more skills as they progress along their chosen path.

#javascript developers #node.js developers #web developer #programming language #NPM package

0 notes

livingcorner · 4 years ago

Text

15 Garden Party Ideas From A Professional Party Planner@|how to plan a garden party@|https://res.cloudinary.com/mwace/image/upload/f_auto,q_auto/v1591768069/HomeMadeSimple_US_EN/ArticleDetailPages/7ADP-Beyond-the-Home/A10/15-garden-party-ideas-from-a-professional-party.jpg@|21

Take your dinner or cocktail parties outdoors this summer with our top garden party tips.

Warm days and balmy evenings make summer the ideal time to take dinner or cocktail parties outdoors. But when it comes to hosting a fabulous garden party, it pays to get creative. We asked professional party planners to share their top garden party tips with us.

[external_link_head]

From staving off the evening chill in style, to stopping bugs from landing in drinks, they’ve got it covered.

1. Pick a stable place in the garden for your party table

If you’re serving dinner, choose a stable place to position the table and chairs where there’ll be minimal wobbling and fewer spills or mishaps. Invest in some wide wooden planks so you can lay them over the lawn to create a solid base or temporary decking.

2. Provide shade from the sunshine

Offer guests both sun and shade options so that everyone can take a break from the heat if need be. Erecting a canopy or small marquee, which you can decorate with flowers, is a great idea. Or if you’re lucky enough to have a room that leads to your backyard, open up the doors and invest in decorative rugs to protect your floors.

[external_link offset=1]

3. Match decorations to your garden plants

Choose a simple décor theme for the party – a shade that matches the flowers in your garden always works well – and carry it through your table settings, chair covers and candles. It’ll help give your party a sophisticated, stylized feel, even though it’s outdoors.

4. Consider color-coordinated party food and drink

To create real synergy between all the elements of your party, mix up a signature fruity punch or welcoming cocktail that coordinates with the colors in your décor theme. You could even carry the color through to the snacks and canapés, where possible.

5. Serve summer fruits with edible flowers

Have an impressive statement dessert on display. Fruits in a champagne jelly always work well, or a delicious summer tart decorated with fresh berries and edible flowers. Your guests won’t be leaving in a hurry if they know what’s still to come!

6. Extend your party through the garden

Place throws, light blankets and a few cushions on your patio furniture. It’ll help create a softer atmosphere during the party, and will allow guests to keep warm and cozy when the evening draws in.

7. Create a magical party garden

Consider the lighting in your garden and, as evening draws in, make use of strategically placed candles (Febreze Candles can help enhance the magical mood). Scattering tea lights around the lawn and along paths will create a beautiful atmosphere, while two or three large candles in key areas will keep the party well lit.

8. Harness nature’s scents for your outdoor party

The beauty of a garden party is that you can use nature to help create ambiance. Emphasize the scents in your flowerbeds by dotting a few scented candles that share the same fragrance around the garden. Position seats near impressive plants, too, so that guests can take in the glory of their surroundings while they relax.

9. Protect your guests from garden pests

Bugs can be a problem, and nobody wants a fly in their drink! Try serving drinks in quirky jam jars instead of glasses. Drill a small hole in the lids so that you can slide in straws, and match them to your color theme. Lighting a few mosquito candles and placing them around the garden can reduce the chance of guests getting bitten, and it’s also a good idea to have bug repellant on hand.

10. Plan party table decorations to match the garden

Use fallen petals and leaves from your garden to sprinkle over the table or drinks area. Small decorative ideas like this create consistency between the garden and eating areas, and also add plenty of color to your arrangement.

[external_link offset=2]

11. Make sure party glassware sparkles

Decorative glass tableware can really set off a garden party by sparkling in the sunshine. Try displaying desserts on a glass stand, and dot large glass jugs of iced water and fruity coolers around the table to catch the light. Before guests arrive, give all your glassware a good clean using Cascade Platinum ActionPacs.

12. Have fun planning your garden party

Garden parties are the ideal scenario for quirkier decorations, and sites like Pinterest can be an endless source of inspiration. Wooden welcoming signs with handpainted messages always look great, as do vintage birdcages filled with flowers.

13. Provide party music in the garden

Don’t forget the music, as it’ll help you create the right atmosphere. Make two different playlists ahead of the party – one for during the day, and one for evening – filled with happy, uplifting songs.

14. Hang party decorations in trees

Make use of the trees in your backyard for hanging fairy lights and bunting. It’ll add a nostalgic feel and help carry your décor from the table settings to the rest of the garden, so that no area looks bare or forgotten.

15. Serve easy-to-eat food

Opt for a meal that’s tasty but easy to eat. If you’re hosting a sit-down dinner, this is less of an issue, but when guests are mingling around a buffet, it’s better if food is easy to enjoy.[external_footer]

source https://livingcorner.com.au/15-garden-party-ideas-from-a-professional-party-plannerhow-to-plan-a-garden-partyhttps-res-cloudinary-com-mwace-image-upload-f_autoq_auto-v1591768069-homemadesimple_us_en-articledetailpage/

#livingcornernews

0 notes

t-baba · 6 years ago

Photo

How CSS custom properties act alongside the CSS 'cascade'

#398 — July 3, 2019

Read on the Web

Frontend Focus

Google Wants to Make The 25-Year-Old robots.txt Protocol An Internet Standard — Google has outlined plans to turn robots exclusion protocol (REP) — better known as robots.txt — into an internet standard after 25 years. Here’s the official blog post announcement from Google.

Ravie Lakshmanan

CSS Custom Properties in the Cascade — Custom properties, also known as CSS variables, provide a way to define and reuse property values, but how do they work in relation to CSS’s cascading abilities?

Miriam Suzanne

Free Course: Get Started with JavaScript by Kyle Simpson 👍 — Get three free courses: Getting Started with JavaScript, Complete Intro to Web Development & Practical Introduction to Algorithms free by signing up for a trial account – no credit card required.

Frontend Masters sponsor

Tips for Rolling Your Own Lazy Loading — Various lazy loading techniques can often come with their own baggage, so here’s how to add your own implementation to your site.

Phil Hawksworth

TWGL.js: A Tiny WebGL Helper Library — If you want to write and use actual WebGL but for it to be easier and less verbose, this is for you and the code comparisons will win you over in seconds.

Gregg Tavares

How Google Pagespeed Works: How to Improve Your Score — A look at how PageSpeed calculates its critical ‘speed score’ which not only reflects user experience but also has some input into how Google will rank your site.

Ben Schwarz

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Frontend Engineer at Goodreads (Amazon) — Join Goodreads to build the frontend of a highly ambitious product that supports reading activities of more than 80 million readers.

Goodreads

100+ Frontend Roles on hackajob 🎉 — Upload your GitHub projects and we'll do the rest. Find a role based on your skills, average salary £70k.

hackajob

📙 News, Tutorials & Opinion

▶ CSS Line Layout and Vertical Rhythm — This session from the recent CSS Day conference, goes over upcoming features to improve CSS’s line box model, to control half-leading, and to maintain vertical rhythm.

Elika J. Etemad

Getting Started with Offline Data in Web Apps — A look at different options for determining the user’s online/offline status and connection speed.

Brian Rinaldi

▶ Discussing SVGs with Sara Soueidan — Wes Bos talks to Sara Soueidan, a freelance frontend UI developer and trainer, about all things SVG. Covers animation, accessibility, graphing, filters and more.

Syntax podcast

The State of JavaScript: 2019 and Beyond. Get the Whitepaper

Progress Kendo UI sponsor

The Ultimate Guide to Flexbox Centering — A solid reference with handy visuals.

Onextrapixel

How To Create a PDF From Your Web Application

Rachel Andrew

Firefox Wants to Help You Fool Ad Trackers With 100 Useless Browser Tabs

Janko Rottgers

CSS is Adding More Ways to Style Underlines:

🔧 Code, Tools & Resources

CSS Doodle: A Web Component for Drawing Patterns with CSS — A Custom Elements-based component that builds an internal grid of DIV elements and then populates them using CSS to create patterns.

Yuan Chuan

static-site-boilerplate: A Better Workflow for Building Modern Static Websites — A boilerplate that takes care of automated build processes, a local development server, production minification and optimizations and more.

Eric Alli

Want a Better Way to Store and Serve Images and Videos? — Join a community of over 400K web and mobile developers dynamically managing rich media with Cloudinary. Try it free.

Cloudinary sponsor

The Best Open-Source Typefaces — A collection of some of the best free fonts from Google and across the web, with examples, recommended pairings, OpenType features, and more.

Chad Mazzola

SVG-Edit: A Powerful Browser-Based SVG Editor — A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.

SVG-Edit

🗓 Upcoming Events

CSSCamp, July 17 — Barcelona, Spain — One-day, one-track conference for web designers and developers.

An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience.

WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers everything from basic web accessibility principles to advanced accessibility techniques.

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

🕰 ICYMI (Some older stuff that's worth checking out..)

You can now define a simple performance budget in a JSON file for testing as part of a Lighthouse audit - here's how.

Obinna Ekwuno asks whether the Tailwind CSS framework is 'tomorrow's Bootstrap'.

Melanie Richards breaks down, step-by-step, how the diverse and complex myriad of screen readers access web content.

A look at how base64 encoding font files can allow for some moderately interesting workarounds on various blogging platforms.

How you can use the CSS env() feature and a PostCSS plugin to share the same variables between CSS and JS in a single file.

by via Frontend Focus https://ift.tt/2NrqmNk

#HTML5 Branding #HTML5 Weekly

0 notes

sporadicmoonalpaca · 6 years ago

Text

Post Submission

Although web reservation sites have made it practical for travelers to get their own flights and hotel rooms, travel companies still present you with a measure of service and knowledge not offered by a search bot. Whenever you make reservations, the reservation engine or website only understands the facts you give it, without having understanding what is really pertinent to you and your group. Travel companies could also have special incentives or rates unavailable to the general public.

Upon reflection it's nearly increasingly apparent that all tourist activities of regardless of what purpose – holidays, company trips, conferences, adventure travel and ecotourism – need to be sustainable.

More focus upon ethical tourism and ethical excursions is seeing a rebirth and is being analyzed by travel agents. It's not an innovative idea, the Journal of Sustainable Tourism was published in 1993.

Could you be a customer weary about biased statements or empty promises made by testimonies about tourism and excursions. Got questions?

I'm guessing you're game for one more rewarding article post related to sustainable vacations and excursions.

Post Submission

submitted by tourguide

on Tour Guide Press News

Please login to use this form

Images

The Post Image field will upload an image and add it to the media library. It is set to be the post featured image. If left blank, the first image in the post will be used as the featured image thumbnail. To add multiple images you can simply paste in the URL to your image into the body of your content. A CDN such as Cloudinary is a good option. You can also use other sources such as Unsplash.com

Clicking the submit button will send your post for publication. Please be sure to comply with guidelines and submit fresh, unique content that is related to the Tour, Travel, and Hospitality industry.

Ethical Hospitality and Tourism

The green travel and hospitality sector can be challenging to understand with so many terms being thrown around. Enterprises occasionally apply these names dishonestly in order to capture the fancy of diligent tourists without really having any green or socially responsible guidelines set. Regardless of the tag the definition is pretty much similar: conscientious environmentally-friendly low impact travel and hospitality that embraces the signs of places and people without the need to alter them excessively. Sustainable tourism and ecotourism are close ideas and show many identical maxims, but sustainable travel and hospitality is more comprehensive; it includes all types of travel and hospitality and destinations.

Usually the most valuable material are not extensive scholastic research projects but anecdotal viewpoints showcasing individuals and small communities. Paradoxically frequently it's the biggest organizations that provide the fresh and informative anecdotes. Without a doubt there is also a role for travel statistical data or policy analysis. Articles like Post Submission posted by tourguide on News help us to take a look at the broad potential of sustainable tourism travel. When you're traveling there are approaches an ethical traveler can suggest that they are conscientious when it comes to communities.

#Array

0 notes

summerskailogophile · 6 years ago

Text

Post Submission

Arranging a vacation overseas can be tough which makes it a good idea to find a tour operator to assist you with the process. Even if you want to travel within your own country, it's usually better to communicate with those who are acquainted transportation, accommodations, and expenses. While web reservation websites make it straightforward for vacationers to buy their own flights and rooms in hotels, travel companies still offer you a degree of service and expertise not delivered by a search bot. When you book online, the reservation engine or website only knows the info you give it, devoid of knowing what is really important to you and your family. Travel companies could also have secret perks or rates not available to the general public.

Basically, the decisions that have an impact on the hospitality and tourism industry are fairly common and are about supply and demand.

Several hospitality and tourism industry ideas remain strong. Curiosity about ethical vacation destinations is still relevant.

Could you be a potential customer tired of sorting through false boasts and thin posts about vacation destinations and fun-based activities. Got questions?

You need to read this latest opinion.

Post Submission

submitted by tourguide

on Tour Guide Press News

Please login to use this form

Images

Responsible Hospitality and Tourism

Regardless of the tag the meaning is pretty much exactly the same: diligent eco-friendly low impact hospitality and tourism that cherishes, not destroys. {Eco-tourism is A bit more narrowly definedas: responsible travel to natural places that conserves the ecosystem and adds to the wellbeing of local people. The key values of ecotourism include lessening impact, protecting biodiversity, building environmental awareness, and respecting local culture. frequently, the main

The term green tourism was used by researchers in a study that described the hospitality industry scheme of positioning green signs in rooms to motivate guests to reuse bath towels. The study determined regarding a lot of places ultimately made no attempt to actually conserve resources or minimize waste; they simply wanted to look to be green. Very much like the introduction of the demand for eco-tourism two decades ago where companies just added the word 'eco' to their signs. Commonly the more instructive information does not come from extensive educational research projects but personal viewpoints featuring people and small communities. Ironically it is sometimes the largest organizations that provide the fresh and entertaining narratives. Clearly there is also a role for tourism statistical reports or policy analysis. Expert articles including Post Submission posted by tourguide on News support us to look into the far reaching topics of sustainable tourism tourism. The aspects that surround ethical vacation destinations and ethical fun-based activities involve people or operators and travel consultants. Not surprisingly a responsible visitor often has recognizable factors that reveal they are considerate of the places they visit.

0 notes

mbaljeetsingh · 8 years ago

Text

Uploading Images to Cloudinary with Laravel (sponsor)

Sponsor / November 13, 2017

Uploading Images to Cloudinary with Laravel (sponsor)

Images are an essential part of any web application. They have the power to create an emotional response in the audience, which is worth its weight in gold. Our brain is designed to interpret images much quicker than text, so when developing a website, it is imperative to take your images seriously.

In this tutorial, I will introduce you to image services offered by Cloudinary for uploading images in Laravel. We will focus on uploading images to the Cloudinary server in Laravel application.

Cloudinary is the end-to-end image and video management solution, which also offers robust, highly reliable cloud storage for all your media.

What We will Build

In this tutorial, we will upload images to Cloudinary using jrm2k6/cloudder package. This package will do the heavy lifting for us and make it easy to interact with Cloudinary API.

Before we start installing Laravel, go to Cloudinary and sign up for a free Cloudinary account.

This will give you the necessary credentials to access and interact with Cloudinary functionalities. Once you have signed up, log in and view your dashboard. It should be similar to this:

Take note of your account details Cloud name, API Key, API Secret because you will need them within your .env file:

CLOUDINARY_API_KEY = 'Your key' CLOUDINARY_API_SECRET = 'Your secret' CLOUDINARY_CLOUD_NAME = 'Your cloud name'

You are almost ready to start utilizing some of the amazing services and functionalities offered by Cloudinary.

Install Laravel

Laravel utilizes Composer to manage its dependencies. So before using Laravel, make sure you have Composer installed on your machine.

You can download and install Laravel via:

Laravel installer

Composer create-project.

For the sake of this tutorial, let’s proceed by using the second option. So run :

composer create-project --prefer-dist laravel/laravel laravel-upload-tut

This will create a Laravel project called laravel-upload-tut in your development directory.

Next, install jrm2k6/cloudder package using composer:

composer require jrm2k6/cloudder:0.4.*

Now open config\app.php file and add the following service provider and aliases in respective array:

'providers' => array( 'JD\Cloudder\CloudderServiceProvider' ); 'aliases' => array( 'Cloudder' => 'JD\Cloudder\Facades\Cloudder' );

Run the following command to publish:

php artisan vendor:publish --provider="JD\Cloudder\CloudderServiceProvider"

The command above will generate a cloudder configuration file for you in the following path config/cloudder.php

You can change the following settings (optional) with corresponding values from your dashboard:

CLOUDINARY_BASE_URL CLOUDINARY_SECURE_URL CLOUDINARY_API_BASE_URL

Start the PHP’s built-in development server to serve your application:

php artisan serve

Creating a Controller and Route

We are getting close; the next thing is to create a controller that will handle the image upload request:

php artisan make:controller ImageUploadController

Open app\Http\Controllers and add :

<?php namespace App\Http\Controllers; use JD\Cloudder\Facades\Cloudder; use Illuminate\Http\Request; class ImageUploadController extends Controller { public function home() { return view('home'); } }

This function will render the view for uploading our images. We will create this view in a bit. To handle image upload, let’s add another function uploadImages()

<?php ... class ImageUploadController extends Controller { public function home() { ... } public function uploadImages(Request $request) { $this->validate($request,[ 'image_name'=>'required|mimes:jpeg,bmp,jpg,png|between:1, 6000', ]); $image_name = $request->file('image_name')->getRealPath();; Cloudder::upload($image_name, null); return redirect()->back()->with('status', 'Image Uploaded Successfully'); } }

Here, we handled validation of an uploaded image and ensured that the file size is between 1kb and 6000kb. Then we used Cloudder::upload($image_name, null) to handle the actual upload of the image to Cloudinary account.

For the upload routes, open routes/web.php file and add the following:

<?php Route::get('/', 'ImageUploadController@home'); Route::post('/upload/images', [ 'uses' => 'ImageUploadController@uploadImages', 'as' => 'uploadImage' ]);

The next thing to do is to create a view file for our example application. So head over to resources/views and create home.blade.php file. Fill it with :

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <title>Cloudinary Image Upload</title> <meta name="description" content="Prego is a project management app built for learning purposes"> <link rel="stylesheet" href="http://ift.tt/2apRjw3"> <link rel="stylesheet" href=""> </head> <body> <div class="container" style="margin-top: 100px;"> <div class="row"> <h4 class="text-center"> Upload Images </h4> <div class="row"> <div id="formWrapper" class="col-md-4 col-md-offset-4"> <form class="form-vertical" role="form" enctype="multipart/form-data" method="post" action=""> @if(session()->has('status')) <div class="alert alert-info" role="alert"> </div> @endif <div class="form-group"> <input type="file" name="image_name" class="form-control" id="name" value=""> @if($errors->has('image_name')) <span class="help-block"></span> @endif </div> <div class="form-group"> <button type="submit" class="btn btn-success">Upload Image </button> </div> </form> </div> </div> </div> </div> </body> </html>

To spice our page up a little, let’s add navigation:

<!DOCTYPE html> <html> <head> ... </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Cloudinary Image Upload</a> </div> </div> </nav> ... </body> </html>

You will notice that we included a stylesheet in the home.blade.php file. Let’s now create public/css/style.css and add:

#formWrapper { border: 2px solid #f5f5f5; padding: 20px; }

By now, your page should look similar to this:

You can go ahead and upload any image now.

There you have it, uploading images to Cloudinary from the Laravel application is as simple as that.

##Bonus: Persisting Image Delivery URLs

The objective of this tutorial was to show you how to upload images to Cloudinary using Laravel. We have been able to achieve this already, but you might want to save the URL of the uploaded image in your database and be able to view all of them, as well.

Let’s create a model for this purpose. The fastest way to create a model is to use the following command, with a parameter that you can use to specify the model name. So in our case, we will create an Upload model.

php artisan make:model Upload -m

Once you are done, you will find a new file as app/Upload.php and migration file associated with the model for our database schema.

Now open the migration file generated and edit it to reflect our database schema:

<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUploadsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('uploads', function (Blueprint $table) { $table->increments('id'); $table->string('image_name'); $table->string('image_url'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('uploads'); } }

##Database Set Up Open the .env file and add your database details

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Your-database-name DB_USERNAME=Your-database-username DB_PASSWORD=Your-database-password

##Migrating and Creating Table You can go ahead and run the migration with:

php artisan migrate

If you hit the following error when trying to run the migration command, it’s because you are running an older version of MySQL:

[PDOException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

You can read more about it here. But a quick fix is to drop the database and re-create it. Then you have to edit your AppServiceProvider.php file and set a default string length inside the boot method:

use Illuminate\Support\Facades\Schema; public function boot() { Schema::defaultStringLength(191); }

You can now run the migration command again and everything should be fine.

In order to obtain and save the image URL uploaded to Cloudinary, we will need to edit the logic within ImageUploadController. So can go ahead and replace uploadImages() function with this:

public function uploadImages(Request $request) { $this->validate($request,[ 'image_name'=>'required|mimes:jpeg,bmp,jpg,png|between:1, 6000', ]); $image = $request->file('image_name'); $name = $request->file('image_name')->getClientOriginalName(); $image_name = $request->file('image_name')->getRealPath();; Cloudder::upload($image_name, null); list($width, $height) = getimagesize($image_name); $image_url= Cloudder::show(Cloudder::getPublicId(), ["width" => $width, "height"=>$height]); //save to uploads directory $image->move(public_path("uploads"), $name); //Save images $this->saveImages($request, $image_url); return redirect()->back()->with('status', 'Image Uploaded Successfully'); }

And add this new method to persist the image URL and name into the database:

public function saveImages(Request $request, $image_url) { $image = new Upload(); $image->image_name = $request->file('image_name')->getClientOriginalName(); $image->image_url = $image_url; $image->save(); }

To access the uploaded image on the homepage, we need to pass the image object to the view:

<?php namespace App\Http\Controllers; use App\Upload; ... class ImageUploadController extends Controller { public function home() { // add this $images = Upload::all(); return view('home', compact('images')); } }

To display the images, we also will need to edit the home.blade.php file:

<!DOCTYPE html> <html> <head> ... </head> <body> ... <div class="row" id="displayImages"> @if($images) @foreach($images as $image) <div class="col-md-3"> <a href="" target="_blank"> <img src="" class="img-responsive" alt=""> </a> </div> @endforeach @endif </div> </div> </div> </body> </html>

So we checked if the $images object is found within the view and loop through it to display the uploaded image.

And add this to the style.css file:

#displayImages { margin: 30px 0; }

You will see the images being displayed immediately after it has been uploaded successfully to Cloudinary:

Conclusion

Cloudinary is a reliable source for storage when it comes to images in particular and any other media files in general. As shown in this tutorial, uploading images to the Cloudinary server from your Laravel web application is so simple to achieve. You can check out Cloudinary for more information on how to manipulate your images dynamically to fit any design.

—

Many thanks to Cloudinary for sponsoring Laravel News this week.

via Laravel News http://ift.tt/2AACDDV

#IFTTT #Feedly

0 notes

crystalywang-blog · 8 years ago

Text

Piano Painting

For this project, I created a series of interactive paintings which come to life when touched.

Concept:

Usually in museums, there are big “Do Not Touch” signs next to paintings. In my concept, I wanted to break that barrier and give the paintings the extra element of sound. With this idea, I created a series of five paintings which all reacted to touch with sound and sometimes visuals.

There’s a lot of flexibility with what can be created with this medium, but the pieces that I made were made with children in mind.

Details:

The first piece was a makeshift piano. This piano had 7 keys and a metronome which plays in two tempos. This is an easy way for children to learn simple scales without owning a full piano.

The second piece is a series of 6 Disney princesses. When you press the stand under the princess, a corresponding music video plays on the computer screen.

The third piece is created with gamers in mind. When you press the weapon, a corresponding Legend of Zelda Ocarina of Time song plays.

The fourth piece is a simple piece. When you press a mountain painted in a traditional Chinese style, it plays Ain’t No Mountain High Enough by Marvin Gaye, with stars on the computer screen which correspond to the volume of the song.

The last piece is a drawing of storefronts. Different interactive pieces are hidden in the painting -- the dog, the car, the restaurant window, the flower shop, and the second story window.

Technical Summary:

I used an Arduino Uno, p5, and conductive ink to make this project. Using Capacitive Sensing I was able to create sections of my drawings that were sensitive to touch. The schematic of the wiring on the Arduino is below.

At the end of every wire, I attached alligator clips. This made it easy to switch between the different paintings.

In the Arduino code, I collected the values from the different clips, concatenated them into a comma delimited string that I then sent over to p5. Each different painting had a different sketch. I housed mp3 sound files on Cloudinary, and hosted images and gifs on Giphy.

Please find my Arduino code and my p5 sketch codes at my github.

Video and Photos:

vimeo

Analysis and Next Steps:

The conductive ink was very sensitive and was easy to paint with. Once I figured out the code for the piano, it was relatively easy to translate it to other paintings -- I just had to swap out the sound files after I uploaded them on Cloudinary.

There was a slight delay on my piano which I’m still working on. In addition, it was difficult to switch between different paintings - although alligator clips made it possible, it is still somewhat annoying to have to clip the wires onto the new painting each time. In a future iteration, I’m going to create a stand that you can slot the painting cards into - hidden inside the stand will be the wires so that there is minimal effort from the user. That way, the box can also hide the Arduino and the wires as well. For those paintings, the conductive ink lines will have to converge at the same place on the canvas so that I can slot in the different places.

0 notes

iyarpage · 8 years ago

Text

Transform Photos into Art with Deep Learning

Life is like a camera. If things don’t work out, you can take another shot. But if you get that perfect picture, you will want to capture the moment and, perhaps, transform it into a work of art.

Have you ever seen art so beautiful and resonating that you wish you could transform your favorite photos into that style? Or perhaps you are a frontend developer or designer seeking an easier way to turn your images into something that’s more appealing, or fits the theme for a special occasion or unique scenario? Maybe you have been tasked to come up with a fun photo booth for a birthday party that enables attendees to transform their photos into a style of art they like? Check out the before and after of the photos below as an example:

Before (left) and after (right)

Existing platforms like Instagram and Prisma enable users to upload images, apply different filters and effects, then produce an image with a very unique style and artistic look. However, you may want to build a similar application that provides more flexibility for the type of art, as well as the kinds of images users can upload.

With Cloudinary, developing a platform that enables you turn photos into art is a breeze. All you need to do is add the style_transfer effect to any delivered image while specifying the image ID of the source artwork as its overlay and activating the Neural Artworks addon.

Source artwork (left), target photo (center), and style transfer result (right)

A Closer Look at Style Transfer with Cloudinary

Cloudinary is a cloud-based image and video management service that includes server or client-side upload, on-the-fly manipulations, quick content delivery network (CDN) delivery and a variety of asset management options.

The style transfer effect applies a complex deep learning algorithm—based on the VGG 16 neural network—that extracts artistic styles from a source image and applies them to the content of a target photograph.

Cloudinary’s algorithm takes advantage of Xun Huange and Serge Belongie’s enhancement on the Gatys algorithm, which make it possible to use any image for both source and target, and still deliver a good quality style transfer in real time, using a single feed-forward neural network.

Cloudinary’s implementation is much faster than other available services, not limited to pre-learned images, and even supports high-resolution outputs that are out of scope for similar services.

How to Implement Style Transfer

To apply this effect, simply specify the public ID of the source artwork as an image overlay (l_ in URLs) and style_transfer as the overlay effect (e_style_transfer in URLs). The target photograph is the public ID of the image to deliver. For example:

http://ift.tt/2v12a68

http://ift.tt/2uIA5VI

Source Artwork (left), target photo (center), and result of the style transfer effect (right)

But wait, there’s more!

You can include the Boolean preserve_color option or adjust the style_strength of the effect like so:

Artwork (left), target photo (center), default style transfer (right)

Preserve Original colors in Style transfer (left), adjust Style Strength to 60 in Style transfer (right)

Give Style Transfer a Try

Back to the task you’ve been assigned—creating a photo booth with effects for a birthday party. Here’s a cool, simple app that demonstrates how style transfer works.

See the Pen Style Transfer Demo by Cloudinary (@Cloudinary) on CodePen.

You can start making yours by signing up for a free Cloudinary account and activating the Neural Artworks add-on. There is comprehensive documentation available to show how you can take advantage of style transfer in your applications.

You no doubt have a lot of ideas about how to turn your photos into art. With Cloudinary, it’s easy to make your vision a reality.

[– This is a sponsored post on behalf of Cloudinary –]

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;} Transform Photos into Art with Deep Learning published first on http://ift.tt/2fA8nUr

0 notes

webbygraphic001 · 8 years ago

Text

Transform Photos into Art with Deep Learning

Life is like a camera. If things don’t work out, you can take another shot. But if you get that perfect picture, you will want to capture the moment and, perhaps, transform it into a work of art.

Before (left) and after (right)

Source artwork (left), target photo (center), and style transfer result (right)

A Closer Look at Style Transfer with Cloudinary

Cloudinary’s implementation is much faster than other available services, not limited to pre-learned images, and even supports high-resolution outputs that are out of scope for similar services.

How to Implement Style Transfer

http://ift.tt/2v12a68

http://ift.tt/2uIA5VI

Source Artwork (left), target photo (center), and result of the style transfer effect (right)

But wait, there’s more!

You can include the Boolean preserve_color option or adjust the style_strength of the effect like so:

Artwork (left), target photo (center), default style transfer (right)

Preserve Original colors in Style transfer (left), adjust Style Strength to 60 in Style transfer (right)

Give Style Transfer a Try

Back to the task you’ve been assigned—creating a photo booth with effects for a birthday party. Here’s a cool, simple app that demonstrates how style transfer works.

See the Pen Style Transfer Demo by Cloudinary (@Cloudinary) on CodePen.

You no doubt have a lot of ideas about how to turn your photos into art. With Cloudinary, it’s easy to make your vision a reality.

[– This is a sponsored post on behalf of Cloudinary –]

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source from Webdesigner Depot http://ift.tt/2wapMKm from Blogger http://ift.tt/2vIqXxD

#Blogger

0 notes

t-baba · 6 years ago

Photo

We should be using Web Workers a lot more than we are..

#441 — June 14, 2019

Read on the Web

JavaScript Weekly

43 JavaScript Questions, With Their Answers Explained — Want to test your JavaScript knowledge? Whether for fun or a job interview, this is an interesting set of questions, complete with explanations of the answers.

Lydia Hallie

An Overview of Promise Combinators — Since ES6 / ES2015, the Promise.all (short-circuits when any promise is rejected) and Promise.race (short-circuits when any promise is settled) have provided two ways to work with groups of promises, but Promise.allSettled and Promise.any are on the way to add extra flexibility. Here’s how to use them all.

Mathias Bynens

Image & Video Management Made for Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

When Should You Be Using Web Workers? — Web Workers provide a way to run JavaScript in background threads in the browser and you’d think using them as much as possible would be a good thing.. right? Current frameworks make this tough, says Surma, who shows us why we should be working to change this ASAP.

Surma

Pika CDN: A CDN for Modern JavaScript — An interesting idea, this. It’s a proxy that serves up npm packages that use the ES Module syntax so you can use them directly on the Web using import.

Pika

Lebab 3.1: Turn Your ES5 Code Into Readable ES6 / ES2015 — An interesting project that follows a variety of rules to convert traditional JavaScript into a more modern variant. You can try it live here. It’s been a couple of years since we’ve linked to it, but it’s continued to get updates.

Rene Saarsoo

An Early Stage Proposal for Immutable Data Structures — A proposal for introducing immutable value types natively to JavaScript. It’s at an early stage but there are some interesting ideas.

Robin Ricard

💻 Jobs

Senior Node.js API Engineer - Exodus (Remote) — Do you live for beautiful APIs? We're looking for a meticulous, obsessive leader to focus on our backend API services.

Exodus

Stream Is Hiring a Senior Full Stack Engineer in Boulder - Colorado — Love writing JavaScript and maintaining infrastructure? We do too. Apply now and join the team in Boulder, Colorado.

Stream

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Using Array.prototype.flat and Array.prototype.flatMap — A quick look at two methods which are now supported in the latest versions of Node, Chrome, Firefox and Safari.

Mathias Bynens

▶ Porting Your Node.js Web App to Serverless in 30 Minutes(ish..) — This live-coding session will guide you through the process of migrating an existing Express application to AWS Lambda.

Alex Casalboni

Join a Community of 3.5 Million Developers — Deploy cloud native apps on the platform developers love. Sign up now with a new user activation credit.

DigitalOcean sponsor

Widening the Web with ECMA-402: Our Work on the Internationalization Extension to JavaScript — ECMA-402 is a separate standard (to ECMAScript itself) defining an internationalization API for ECMAScript. It’s supported to a certain extent by most browsers but there is still a lot of work to be done.

Valerie Young (Bocoup)

How One Team of Freelancers Writes Full Stack JavaScript Apps — Some simple principles one distributed agency uses.

Elie Steinbock

The reduce ({...spread}) Anti-Pattern — As an aside, this post is really well presented.

Rich Snapp

The Open Source Conundrum: How Do We Keep the Lights On?

CodeFund sponsor

A Guide to Angular 8's Differential Loading — Angular 8 now sends different bundles of code to different clients. Here’s the how and why, plus an Angular Auth0 tutorial tacked onto the end for some reason 😄

Sam Julien

To Have A Future, Ember Must Kill Its Past

Andrew Callahan

🔧 Code and Tools

readme-md-generator: A CLI That Generates Good-Looking README.md Files — It’s pretty simple but the results are nice. Answer some questions and get a good starter template for your project’s README.md file.

Franck Abgrall

VuePress 1.0 Released: A Vue.js-Powered Static Site Generator — There’s also a writeup of a talk which covered what’s new in 1.x.

Evan You

React Hot Loader 4.11.0: Tweak React Components in Real Time

Abramov, et al.

ChessBoard.js 1.0: A JavaScript Chessboard Component — Happy 1.0! Note that jQuery is a dependency. Examples here.

Chris Oakman

Gauge + Taiko = No More Flaky Tests. Everything You Need for Reliable End-to-End Testing — Gauge and Taiko are open source tools created by ThoughtWorks for end-to-end test automation.

Gauge sponsor

React-Leaflet 2.4: React Components for Leaflet Maps — Leaflet is a popular JavaScript library for creating interactive maps. This library brings support direct to React and has recently added React 16.8 and Flow 0.100 support.

Paul Le Cam

Swagger Client: A JS Client to Fetch, Resolve, and Interact with Swagger/OpenAPI Documents

Swagger

A Minimal Starter Boilerplate for JavaScript Libraries — Brings together Webpack 4, Babel 7, and Jest.

Francisco Hodge

Lightweight Charts: Lightweight, Canvas-Powered Financial Charts

TradingView, Inc.

by via JavaScript Weekly http://bit.ly/2KfQ70E

#Javascript Branding #Javascript Weekly

0 notes

mbaljeetsingh · 8 years ago

Text

Overlay Glasses/Masks on Avatars with Vue.js and Cloudinary

Deep Learning, a subset of machine learning, helps break down tasks in ways that makes all kinds of machine assists seem possible. With deep learning, it is now possible to do image recognition by machines. Instead of hand-coding software programs with a specific set of instructions to accomplish a particular task, the machine is trained using large amounts of data and algorithms that give it the ability to learn how to perform the task.

Even though you might posses the technical know-how to train models to identify images, and perform some next level facial attribute detection, you now can leverage existing cognitive services to do your bidding.

What We'll Build

In this article, we’ll build a demo app with Cloudinary and Microsoft Cognitive service in which users can test different glasses and masks to see it looks on them before making a purchase.

Applying deep learning to enhance our business? Yes, we are!

What is Cloudinary?

Cloudinary is a cloud platform that provides solutions for image and video management, including server or client-side upload, a huge range of on-the-fly image and video manipulation options, quick content delivery network (CDN) delivery and powerful asset management options.

Cloudinary enables web and mobile developers to address all of their media management needs with simple bits of code in their favorite programming languages or frameworks, leaving them free to focus primarily on their own product's value proposition.

Let’s Get Started

Step 1: Create a Cloudinary Account

Once you are signed up, you will be redirected to the dashboard where you can get your credentials.

Take note of your Cloud name, API Key and API Secret

Step 2: Set Up A Node Server

Initialize a package.json file:

npm init

Install the following modules:

npm install express connect-multiparty cloudinary cors body-parser --save

express: We need this module for our API routes connect-multiparty: Needed for parsing http requests with content-type multipart/form-data cloudinary: Node SDK for Cloudinary body-parser: Needed for attaching the request body on express’s req object cors: Needed for enabling CORS

Step 3: Activate Advanced Facial Attributes Detection Add-on

Go to the dashboard add-ons section. Click on Rekognition Celebrity Detection Add-on and select the Free Plan.

Note: You can change to other plans as your usage increases.

Step 4: Identify Facial Attributes

Create a server.js file in your root directory. Require the dependencies we installed:

const express = require('express'); const app = express(); const multipart = require('connect-multiparty'); const cloudinary = require('cloudinary'); const cors = require('cors'); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cors()); const multipartMiddleware = multipart();

Next, configure Cloudinary:

cloudinary.config({ cloud_name: 'xxxxxxxx', api_key: 'xxxxxxxx', api_secret: 'xxxxxxx' });

Replace xxxxxx with the real values from your dashboard.

Add the route for uploading. Let’s make the route /upload.

app.post('/upload', multipartMiddleware, function(req, res) { // Upload to Cloudinary cloudinary.v2.uploader.upload(req.files.image.path, function(error, result) { res.json(result); }, // Specify Transformation & Facial Attributes Detection { transformation: [ { width: 700, radius: "max", crop: "scale" }, { flags: "region_relative", gravity: "adv_eyes", overlay: req.body.item, width: "1.7" } ] });

Quickly take a look at the overlay parameter. It takes in a value of req.body.item. In this app, the values are either glasses or harlequinmask.

Note: I uploaded two photos to my Cloudinary account and made sure they were renamed glasses and harlequinmask. These are the two images we will use as overlays in this app.

harlequinmask and glasses respectively. Go ahead and upload them to your account too.

The Advanced Facial Attribute Detection add-on detects specific facial attributes, including the exact position of the eyes of each face in a photo. Based on this information, Cloudinary can position overlays on top of all the detected eye pairs in an image.

To smartly overlay the glasses or harlequinmask on top of the detected eye pairs in the image, the user uploads, the overlay parameter is set to the ID of the harlequinmask or glasses image and the gravity parameter is set to adv_eyes. We also set the _regionrelative flag together with a 1.7 width to scale the overlay to 170 percent of the width of the detected eyes, and resize the image to an oval thumbnail with a width of 700 pixels.

Once a user makes a POST request to the /upload route, the route grabs the image file from the HTTP request, uploads to Cloudinary, identifies the pair of eyes and overlays them with whatever option the user chooses (either glasses or harlequinmask) and returns the right URL.

Note: The Advanced Facial Attribute Detection add-on is an integrated face detection solution that utilizes Microsoft Cognitive Services. Microsoft Cognitive Services provides high precision face location detection with state-of-the-art, cloud-based algorithms that can detect up to 64 human faces in an image. The detected faces are returned with rectangles (left, top, width and height) indicating the location of faces in the image in pixels, the exact position details of the eyes, mouth, eyebrows, nose and lips, as well as a series of face-related attributes from each face, such as pose, gender and age.

Test the functionality with Postman.

Step 5: Build the Frontend

We’ll use the progressive framework, [Vue.js] to quickly flesh out the frontend. Let’s get started by installing the CLI:

npm install -g vue-cli

Next, create a simple Vue project using the Vue CLI tool we installed:

vue init simple productshowcase

Inside the productshowcase directory, create an index.html file and add the following code to it:

<!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="http://ift.tt/2nlicUC;></script> <script src="http://ift.tt/2oYI3XH;></script> <link rel="stylesheet" href="http://ift.tt/2cYLUyN; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container" style="margin-top: 3%; margin-left: 2%;"> <div class="col-md-6"> <div> <div class="col-md-6"> <img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505797868/glasses.png" width="200" height="100" /> <span> Glasses </span> </div> <div class="col-md-6"> <img src="http://ift.tt/2y6KlrH; width="200" height="100" /> <span> Harlequin Mask </span> </div> </div> <hr /> <form enctype="multipart/form-data" @submit.prevent="onSubmit"> <div class="form-group"> <select class="form-control" name="item" v-model="model.item"> <option disabled value="">Choose an item</option> <option value="glasses"> Glasses </option> <option value="harlequinmask"> Harlequin Mask </option> </select> </div> <div class="form-group"> <label for="">File:</label> <input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"> </div> <div class="form-group"> <button class="btn btn-primary" >Upload</button> </div> </form> </div> <div class="col-md-4"> <div class="col-md-6" style="margin-top: 20%;"> <img id="originalface" class="img-responsive" alt="" width="600" height="600"> </div> <div class="col-md-6" style="margin-top: 20%;"> <img :src="maskedface" class="img-responsive" alt="" width="400" height="400"> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: function() { return { model: { text: '', image: null, item: '' }, maskedface: null, loading: '', } }, methods: { upload: function(files) { this.model.image = files[0] this.showPreview(files[0]); }, showPreview: function(file) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("originalface").src= e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(file); }, onSubmit: function() { // Assemble form data const formData = new FormData() formData.append('image', this.model.image); formData.append('item', this.model.item); this.loading = "Processing....Please be patient." // Post to server axios.post('http://localhost:3333/upload', formData) .then(res => { // Update UI this.maskedface = res.data.url this.loading = '' }) } } }) </script> </body> </html>

Now, run the app.

What’s going on here? Don’t be scared, let’s step through the code. First we have a form for uploading of images.

<form enctype="multipart/form-data" @submit.prevent="onSubmit"> <div class="form-group"> <select class="form-control" name="item" v-model="model.item"> <option disabled value="">Choose an item</option> <option value="glasses"> Glasses </option> <option value="harlequinmask"> Harlequin Mask </option> </select> </div> <div class="form-group"> <label for="">File:</label> <input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"> </div> <div class="form-group"> <button class="btn btn-primary" >Upload</button> </div> </form>

We bind the upload form to an upload event handler. There is a change event attached to the select file button. Once a user selects a file, the showPreview method called in the Vue instance below is invoked. This method shows a thumbnail preview of the image about to be uploaded.

Thumbnail preview of the image about to be uploaded.

Check out the methods, model and data properties on our Vue instance.

new Vue({ el: '#app', data: function() { return { model: { text: '', image: null, item: '' }, maskedface: null, loading: '', } }, methods: { upload: function(files) { this.model.image = files[0] this.showPreview(files[0]); }, showPreview: function(file) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("originalface").src= e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(file); }, onSubmit: function() { // Assemble form data const formData = new FormData() formData.append('image', this.model.image); formData.append('item', this.model.item); this.loading = "Processing....Please be patient." // Post to server axios.post('http://localhost:3333/upload', formData) .then(res => { // Update UI this.maskedface = res.data.url this.loading = '' }) } } })

When the form is submitted, it calls the onSubmit function in our Vue method. The onSubmit method then makes a post request to the backend and returns data back to the frontend.

The data returned is the modified image with the overlay. And this reflects on the UI.

Harlequin Mask selected and an Image of Rihanna uploaded.

Glasses selected and an Image of Christian Nwamba, a.k.a codebeast, uploaded!

Feel free to check out the source code here.

Conclusion

We just performed a facial attribute detection together with an Image overlay transformation with Cloudinary. The options are limitless as to what you can do with the information in this tutorial.

Go forth and enhance your business with products that users will love. And Oh you don’t have to spend time building them, Cloudinary’s got you!

via Scotch.io http://ift.tt/2g9Rm43

#IFTTT #Feedly

0 notes

webbygraphic001 · 8 years ago

Text

How to Build Banners With Custom Fonts Using Just Urls

Designing fun, visually appealing party banners can be a complicated task if you don’t have enough graphic design experience or know how to use image editing software, such as Photoshop or Sketch. Buying and installing an image editing software, installing custom fonts, designing the graphics and figuring out how to apply a text overlay can take a great deal of time and cost a lot of money… However, there is another option—Cloudinary—that is easy to use and can speed the design process with the use of a single URL.

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, image manipulation and delivery. One example of image manipulation features is Image Text overlays (which is the topic of discussion).

In this post, I will show you how to achieve the image overlay in the example above using Cloudinary, not just with common fonts, but with any custom font of your choice. At the end, you will see how simple, powerful and flexible this solution is compared to using graphics editing software.

1. Setup Cloudinary

Cloudinary is simple to setup and use. You just need to create an account, after which you’re assigned a cloud storage for your images:

Create a FREE Cloudinary account using the signup form.

When you sign up successfully, you’re presented with a dashboard that holds your cloud credentials. You can safely store them for future use:

2. Upload Images

Now that you have a free Cloudinary account, you can give it a test drive. Go to the Media Library and upload some images to your cloud:

As you can see, the upload widget enables you to either upload from your computer or provide a link. Don’t bother about hunting for nice pictures on your computer, you can use what I got you from Pexels.

Click on the thumb showing the image you uploaded and copy the link from the image’s details page.

This is the what the original image looks like after scaled down to 700px width:

Cloudinary Offerings

Before we start implementing the text overlay feature, let me tell you about the core Cloudinary offerings:

Storage: We encountered this feature while uploading images to the server.

Delivery: The URL we got from the media library is what we use to deliver images from Cloudinary.

Transformation: Cloudinary enables you to manipulate images by adjusting URL parameters in the delivery URL. The image above is transformed before delivery by adding the transformation parameter ‘w_700’ which scales the image from it’s original 1,000+ pixel width to 700px.

3. Text Overlay

Text overlays in this context refers to applying characters as a mask on graphic images. This process is commonly used in image editing tools like Photoshop, Sketch or Illustrator, where you import an image to your work art board and use the text control to apply characters above the image. For example:

The text printed on the party background image is what is referred to as “text overlay.”

I used the font Verdana in the “JOHNSONS PRESENT” text in the example above. Verdana is a popular font and is readily available as a common font. However, in some situations, you may need to use custom fonts. In this case, you could go to a website like dafont.com, download a custom font, install on your machine and use in your designs.

Text overlays are applied as transformation via the transformation parameters, much like what we did with the width of the party image. The following example shows a text overlay on the image:

http://ift.tt/2uysCre

This URL defines the many features going on with this image transformation:

w_700: Scales down the image to 700px

l_text: Defines the overlay text to be placed on the an image. This is a transformation feature.

Verdana: Font style

20: Font size

bold: Font weight

underline: Text decoration

JOHNSONS%20PRESENTS: URL encoded overlay text

g_north: Text location which is top of the image.

y_25: y axis offset of the text from the top in percentage

co_rgb:F9583: Text color for the overlay

4. Custom Fonts

Our party banner is taking shape, but to make the banner more festive, we want to add some crazy fonts. We don’t commonly see crazy fonts, hence you shouldn’t expect to see one. This is why you cannot just use l_text:CrazyFont.

Cloudinary is very flexible, though. You can upload your own custom font to Cloudinary, then use its public ID as the l_text value. Midnight Valentine is a typical party font that we can use. Download the zipped file, unzip, and upload the .ttf font file.

(NB: You can only upload .ttf or .otf fonts.)

You need to specify the type as authenticated and resource type as raw. You can do this while uploading via SDKs. Say Node for instance:

var cloudinary = require(’cloudinary’)

// Credentials retrieved from dashboard

cloudinary.config({

cloud_name: 'CLOUD_NAME',

api_key: 'API_KEY',

api_secret: 'API_SECRET'

})

cloudinary.v2.uploader.upload(

__dirname + '/Midnight-Valentine.ttf',

{resource_type: 'raw',

type: 'authenticated',

public_id: 'Midnight-Valentine.ttf'},

function(error, result) {

console.log(result, error)

})

You can now deliver the image using the custom font we uploaded:

http://ift.tt/2vxSd0u

We chained another transformation to what we had before. This time, the l_text’s font style value is now Midnight-Valentine.ttf which is the public ID of the font we uploaded. We removed the g_north property, as well as the y property, so the overlay position stays at the default location, which is the center of the image.

Let’s have some more fun adding the venue and date of the party:

http://ift.tt/2vxMwzQ

Conclusion

The first image shown at the beginning of this article was designed in Sketch. The last image was built by composing parameters in a URL. You can imagine how powerful the latter is. Knowing the right properties in Cloudinary to use will enable you to start generating graphics dynamically without the help of a graphics designer.

You can learn more about these properties from the Cloudinary docs.

[– This is an advertorial on behalf of Cloudinary –]

5,000+ Pixel-Perfect Icons from Icon54 – only $24!

Source from Webdesigner Depot http://ift.tt/2uEiwWz from Blogger http://ift.tt/2u5Zt5Z

#Blogger

0 notes

mbaljeetsingh · 8 years ago

Text

Create Scotch-Like Image Cards in Angular 2+ with Cloudinary

When it comes to managing media files, we rely on Cloudinary for its ease and efficiency. The Cloudinary tool enables us to adeptly handle storage, transformation, and calculated delivery, so we can focus simply on uploading and fetching images with little configurations to suit our needs.

Because we have previously written about Cloudinary’s features, we won’t go into detail about them here. Instead, we’ll focus on how we can integrate Cloudinary in Angular 2x.

Cloudinary has just released a new SDK release for this integration, so we will explore what this SDK has to offer and show how to use the SDK to deliver animated image cards as seen on Scotch.io home page.

What we will build

Setup Environment

Angular CLI is the quickest way so far to create an Angular project. It takes only two steps: Install the CLI tool (if you haven’t) and create a new project with it. The installation should be done via npm, thus:

npm install -g angular-cli

Create a new project with the tool by running the following command:

# Create new project ng new scotch-cards # Enter project folder cd scotch-cards # Run app ng-serve

With the Angular project created, now install the Cloudinary SDK via npm:

# install Cloudinary npm install @cloudinary/angular cloudinary-core --save

The SDK is based on Cloudinary’s JS module, cloudinary-core, and entirely decoupled, so you have to install both. Decoupling the both libraries allows you to use the SDK features that do not require the JS module without having to bear the burden of size.

Due to the limitations in Angular CLI project (not exposing resolve aliases, not having an addon system ready yet) you need to install lodash since cloudinary-core depends on it.

Let’s import and provide the SDK to our app module so we can gain access to its APIs and components:

// ./src/app/app.module.ts import { HttpModule } from '@angular/http'; import { CloudinaryModule } from '@cloudinary/angular'; import * as Cloudinary from 'cloudinary-core' import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ HttpModule, CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'cloud_name'}), ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }

Importing the module gives you access to the SDK’s directives and components. The import is configured using the static forRoot method, passing in Cloudinary’s JS core and the config object.

The config object contains a cloud_name property, which is received upon creating a free Cloudinary account. The cloud_name is available on the dashboard.

Another important thing to include is the typings.d.ts to shut TypeScript from screaming that the module, cloudinary-core is not defined. You need to declare the cloudinary-core in this file:

// ./src/typings.ts declare module 'cloudinary-core';

Cloudinary Components and Directives

To start delivering images from your Cloudinary cloud using this SDK, you need to become comfortable with the components and directives made available by the SDK. Let’s explore them:

Components

is used to deliver images to the browser. It requires public-id, which is a reference to the image hosted on the cloud. So if we have something like:

cl-image secure="true" public-id="cat" class="cat_image" format="jpg"> cl-image>

We get:

img class="cat_image" public_id="cat" src="http://ift.tt/2kVfQh7;>

By default, Cloudinary delivers media files using non-secure URLs. However, the secure attribute, when applied, instructs Cloudinary to deliver media files using a secure URL (HTTPS).

just like is used to deliver videos. Most important property is still the public-id of the video to be delivered:

cl-video public-id="dog" class="dog_video" controls="true" preload="none"> cl-video>

Output:

video secure="true" _ngcontent_ymq_2="" class="dog_video" controls="true" preload="none" public_id="dog" ng_reflect_public_id="dog" poster="http://ift.tt/2lajlyz;> source src="http://ift.tt/2kVoJqX; type="video/webm"> source src="http://ift.tt/2lacDIZ; type="video/mp4"> source src="http://ift.tt/2kVdIpC; type="video/ogg"> video>

Cloudinary will automatically convert your videos to HTML5 and mobile-friendly formats for optimized viewing on all web browsers and mobile devices.

is used to apply transformations to both images and videos. You can read more about Cloudinary transformation here.

Transformations can be applied multiple times to either of the delivery components:

cl-image secure="true" public-id="angular_logo" class="logo" angle="20" format="jpg"> cl-transformation height="150" width="150" crop="fill" effect="sepia">cl-transformation> cl-transformation overlay="text:arial_20:Angular" color="#EECCAA" gravity="south" y="20">cl-transformation> cl-image>

Multiple transformation are chained, therefore, the transformation are applied in order of listing and you can apply as many as needed to ensure your media appears correctly. Chaining transformations enables you to edit a media files based on the previous transformation. For example, it makes more sense to apply a border radius to an image after it has been cropped. Therefore, the cropping transformation will come first and then the border radius transformation will be chained to it, and so on.

The above example will generate the following HTML:

img class="logo" _ngcontent_ovt_3="" public_id="angular_logo" ng_reflect_public_id="angular_logo" src="http://ift.tt/2kVeT8A;>

The transformation is applied to the URL and each chained transformation is separated with /.

Attribute Directives

clSrc: You might not want Cloudinary generating the image tag for you. Sometimes what you need is just the URL. The clSrc attribute directive does just that:

img clSrc="cat" alt="Cat Image" />

clHref just like clSrc is used to generate the image URL for an anchor tag, not an image tag.

a clHref="cat"> . . . a>

Another awesome feature of the clHref attribute directive is that you can apply transformation as attributes on the anchor tag for the linked image:

a clHref="cat" width="150" gravity="auto" crop="thumb"> ... a>

It is worth noting that the transformation directive, cl-transformation, also can be added to anchor tags bearing the attribute directives:

a clHref="cat" width="150" gravity="auto" crop="thumb"> cl-transformation height="150" width="150" crop="fill" effect="sepia">cl-transformation> a>

Fetch Images from Cloudinary

In our example, we do not plan on displaying a single image. Instead, we want to fetch a list, iterate over the list and display each item in the list as a card.

We can fetch these images by making an HTTP request to Cloudinary once our component is initialized with the ngOnInit lifecycle method:

export class AppComponent implements OnInit{ title = 'app works!'; cards = []; constructor( // Inject HTTP service private http: Http ){} ngOnInit() { // Fetch images tagged 'scotch' and set the images to 'cards' this.http.get('http://ift.tt/2kPKpET') .map(data => data.json().resources) .subscribe(resources => { this.cards = resources }); } }

For security reasons, Cloudinary will not allow you to make requests like this from the client. The best method is to use the admin API via a backend SDK and then send the resource list to the client.

However, to enable access to list resources from client, you need to enable client resource listing. This is not recommended in production environment but is fine for demo purposes.

With the fetch logic out of the way, we now iterate over the cards property in the template to render them:

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-image> div> div class="gallery__item-content"> div> a> div>

Auto Cropping and Format Techniques

Currently, the image is fetched and displayed without any transformation. There is a cost to this, because what is fetched is the actual large image and the size is reduced with just CSS. While this fine for demo purposes, it is important to note that it will be a very expensive act for production apps.

With Cloudinary’s auto cropping features, you can transform the images before they are delivered to your browser. Cloudinary does the heavy lifting and you are served with image that maintain the same quality but with less weight.

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-transformation width="150" quality="auto" crop="fill">cl-transformation> cl-image> div> div class="gallery__item-content"> div> a> div>

Some image formats are overkill for various delivery situations. It would not make sense to display a simple banner with no need for transparency using the png format. Cloudinary is smart enough to deliver the right format for your needs, even when you upload an unnecessary format. Just as we set quality to auto, we can set fetch_format to auto as well for auto format technique:

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-transformation width="150" quality="auto" crop="fill" fetch_format="auto">cl-transformation> cl-image> div> div class="gallery__item-content"> div> a> div>

Demo

Conclusion

Now that you have seen how to craft Scotch-like image cards in Angular 2x with Cloudinary, there are a few important things to keep in mind. For example, you will want to use the Angular 2 SDK to deliver images, rather than talking to the Cloudinary client API directly. In addition, the cl-image and cl-video are used to deliver images and videos respectively, and the cl-transformation can be used to apply transformations to both types of files. And finally, the attribute directives, clSrc and clHref, are used to request the absolute URL of a media file based on the public ID provided.

To try this for yourself, sign up with Cloudinary for free and get started.

via Scotch.io http://ift.tt/2ldiJe5

#IFTTT #Feedly

0 notes